// 登录页
import React from 'react'
import Logo from '../../images/logo.png'
import '../Register/index.css'
import './index.css'
import imgLeft from '../../images/shouji.png'
import Tel from './dengluyemianmima.png'
import PassW from './zhucedenglushoujihao.png'
import Footer from '../Public/Footer'
import {Link,Redirect}from 'react-router-dom'
import {connect} from 'react-redux'
import {getUsers} from '../../store/Register.redux'
@connect(
	state=>({
		users:state.Login.users
	}),{
		getUsers
	}
)
class Login extends React.Component{
    constructor(props){
        super(props)
        this.state={
			user:'',//用户名
			password:'',//密码
			isLogin:sessionStorage.getItem('userName')
		}
	}
	getUser=(e)=>{
		this.setState({
			user:e.target.value
		},()=>{
			// 请求数据用户
		this.props.getUsers(this.state.user)
		})
		
	}
	getPassword=(e)=>{
		this.setState({
			password:e.target.value
		})
	}
	//点击登录按钮
	onclickLogin=()=>{
		let user = this.state.user
		let password = this.state.password
		if(user!=''&& password!=""){
			if(this.props.users.length===0){
				alert('用户不存在，请立即注册')
				this.props.history.push({pathname:'/register'})
			}else{
				let getUs = this.props.users[0].name
				let getPs = this.props.users[0].password
				if(user===getUs && password===getPs){
					// let userId = new Cookie()
					sessionStorage.setItem('name',user)
					this.setState({
						isLogin:user
					})
					this.props.history.push({pathname:'/minecont/mine'})
				}
			}
		}else{
			alert('请输入用户名')
		}
		
	}
    render(){
		
			return (
				<div>
				<div className="content">
					<div className="log">
						<img src={Logo} alt=''/>
						<span>欢迎登录</span>
					</div>
					<div className="cont border">
					<div className="formLeft">
						<img src={imgLeft} alt=""/>
					</div>
					<div className="formRight RightBorder">
						<form className="FormBorder">
							<h3>登录</h3>
							<input type="image" src={PassW} /><input className="borderLeft" type="tel" name="users" placeholder="请输入手机号码" onBlur={this.getUser}/><br />
							<input type="image" src={Tel} /><input className="borderLeft" type="password" name="password" placeholder="输入密码" onBlur={this.getPassword}/><br />
							<input type="checkbox" /><span className='displayI'>下次自动登录</span><br />
							<button className="butt" type='button' onClick={this.onclickLogin}>登录</button><br />
							<Link to="/register">免费注册</Link><Link to='/forgetPassword' className="rightA">忘记密码</Link>
						</form>
					</div>
				</div>
			</div>
			<Footer></Footer>
			</div>
			)
    }

}
export default Login